syslib.namespace("syslib.ui");

syslib.ui.TabItemTag = __class(syslib.ui.VisualTag, {
	__parentTagName : "tabpanel",
	
	tab : null,  
	

	prepare : function(){
		// check the parent
		if(!__valid(this.__parent)){
			syslib.messages.error("syslib.ui.TabItem.Conversor.prepare(): Invalid tabpanel!");
			return false;
		}
		
		// start the tab
		this.tab = new syslib.ui.TabItem(this.__parent, this.__attributes.label, this.__innerHTML);
		
		// check the integrity
		if(!this.tab){
			syslib.messages.error("syslib.ui.TabItem.Tag.prepare(): Error creating the tab!");
			return false;
		}
		
		// set the page, if needed
		if(__valid(this.__attributes.page)){
			this.tab.page = this.__attributes.page;
		}
		
		// set the additional css text, if needed
		if(__valid(this.__attributes.style)){
			this.tab.cssText = this.__attributes.style;
		}
		
		// set as closeable, if needed
		if(__valid(this.__attributes.closeable) && this.__attributes.closeable == "true"){
			this.tab.closeable = true;
		}
		
		// return
		return true;
	},

	execute : function(element){		
		// create the tag
		this.__element = this.tab.create();
		
		// return the created tab's element container
		return this.__element;
	},

	finalize: function(){
		// select, if needed
		if (this.__attributes.selected === "true") {
			this.tab.focusTab();
		}
	}
});

syslib.ui.TabItem = __class({
	id : null, 
	index : null, 
	tabPanel : null, 
	label : null, 
	htmlContent : null, 
	
	content : null,
	selector : null, 
	references : null,
	
	selected : false,
	closeable : false, 
	
	page : null,    
	cssText : "", 
	
	__construct: function(tabPanel, label, htmlContent){
		// generate a random ID
		this.id = syslib.element.generateID();
		
		// check the tabpanel integrity
		if(!__valid(tabPanel)){
			syslib.messages.error("syslib.ui.TabItem(): Invalid tabpanel!");
			return false;
		}
		
		// set the tabpanel
		this.tabPanel = tabPanel;
		
		// set the label
		this.label = (__valid(label)) ? label : "Untitled tab";
		
		// set the content
		this.htmlContent = (__valid(htmlContent)) ? htmlContent : "";
		
		// set the default value for the closeable flag
		this.closeable = false;
		
		// set the remote page as null
		this.page = null;
		
		// set the additional css text as an empty string
		this.cssText = "";
	}, 
		
	create : function(){
		// set the element attributes
		var attributes	= {
			"cellpadding" : 0,
			"cellspacing" : 0,
			"border" : 0,
			"class" : "syslib-tabitem-main-container",
			"id" : this.id, 
			"style" : this.cssText
		};
		
		// selector structure
		var selectorStructure = ["table", attributes,
			["tbody",
	 			["tr",
					["td", {"innerName" : "left", "class": "syslib-tabitem-left-normal"}, "&nbsp;"],
					["td", {"innerName" : "middle", "class": "syslib-tabitem-middle-normal"},
						["span", {"class" : "syslib-tabitem-main-content syslib-text"}, this.label], 
						["span", {"class" : "syslib-tabitem-close-button-normal", "innerName" : "closeButton"}, "&nbsp;"] 
					],
					["td", {"innerName" : "right", "class": "syslib-tabitem-right-normal"}, "&nbsp;"],
					["td", {"class" : "spacer"} ]
				]
			]
		];
		
		// content structure
		var contentStructure = ["div", {"style" : "display: none; position: relative;"},
			this.htmlContent
		];
		
		// create the content element 
		var content = syslib.element.createFromJSON(false, contentStructure);
		delete contentStructure;
		
		// create the selector element
		var selector = syslib.element.createFromJSON(false, selectorStructure);
		delete selectorStructure;
		
		// set the referentes
		this.references = selector.references;
		
		// set the selector
		this.selector = selector.element;
		
		// set the content and the main element
		this.content = content.element;
		
		// set the selected state
		this.selected = false;
		
		// hide the close button, if needed
		if(this.closeable === false){
			syslib.element.hide(this.references.closeButton);
		}
		
		// add to the tabpanel
		this.index = this.tabPanel.addTab(this);
		
		// set the events
		this.__setEvents();
		
		// append the content to the tabpanel
		this.tabPanel.__refs.body.appendChild(this.content);

		// return
		return this.content;
	}, 
	
	__setEvents : function(){
		// set the events for the tab container
		syslib.event.listen("click", this.selector, function(){
			this.focusTab();
		}.applyTo(this));
		syslib.event.listen("mouseover", this.selector, function(){
			if(this.selected !== true){
				this.__over();
			}
		}.applyTo(this));
		syslib.event.listen("mouseout", this.selector, function(){
			if(this.selected !== true){
				this.__unselect();
			}
		}.applyTo(this));
		
		// set the events for the close button
		syslib.event.listen("mouseover", this.references.closeButton, function(){
			this.references.closeButton.className = "syslib-tabitem-close-button-over";
		}.applyTo(this));
		syslib.event.listen("mouseout", this.references.closeButton, function(){
			this.references.closeButton.className = "syslib-tabitem-close-button-normal";
		}.applyTo(this));
		syslib.event.listen("click", this.references.closeButton, function(){
			this.closeTab();
		}.applyTo(this));
	},
	
	focusTab : function(){
		// select the tab
		this.tabPanel.focusTab(this.index);
		
		// set as selected
		this.selected = true;
		
		// set the style
		this.__select();
	}, 
	
	blurTab : function(){
		// set the style
		this.__unselect();
		
		// set as unselected
		this.selected = false;
	}, 
	
	closeTab : function(){
		// remove the tab
		this.tabPanel.removeTab(this.index);
	}, 

	__select : function(){
		this.references.left.className		= "syslib-tabitem-left-selected";
		this.references.right.className		= "syslib-tabitem-right-selected";
		this.references.middle.className	= "syslib-tabitem-middle-selected";
	},

	__over : function(){
		this.references.left.className		= "syslib-tabitem-left-over";
		this.references.right.className		= "syslib-tabitem-right-over";
		this.references.middle.className	= "syslib-tabitem-middle-over";
	},

	__unselect : function(){
		this.references.left.className		= "syslib-tabitem-left-normal";
		this.references.right.className		= "syslib-tabitem-right-normal";
		this.references.middle.className	= "syslib-tabitem-middle-normal";
	}
});